import React, {Component} from 'react';
import './Account.less';
import {List} from 'antd-mobile';
import {mockLogin} from '../../api/userApi';
import {withStore} from '../../store/storeUtils';
import store from '../../store';

const MOCK_USER_ID = 1;

class Account extends Component {
    state = {
        user: {}
    };

    componentDidMount() {
        const _this = this;
        const {storeState} = this.props;
        this.setState({
            user: storeState.token.user || {},
        });
        this.unSub = store.subscribe(() => {
            const {token} = store.getState();
            const user = token.user || {};
            _this.setState({
                user: user,
            });
        });
    }

    componentWillUnmount() {
        this.unSub && this.unSub();
    }

    mockLogin = () => {
        const _this = this;
        mockLogin(MOCK_USER_ID).then(res => {
            const {token, wechatUser} = res;
            _this.props.actions.setToken(token, wechatUser);
        });
    };

    render() {
        const {user} = this.state;
        return (
            <div className="account">
                <div className="avatar">
                    <div className="img-wrapper">
                        <img src={user.wavatar} alt="Avatar"/>
                    </div>
                </div>
                <List renderHeader="用户信息">
                    <List.Item extra={user.wnickname || '未登录'}>用户信息</List.Item>
                    <List.Item extra={user.wopenId || '未登录'}>绑定微信</List.Item>
                    <List.Item arrow="horizontal">设置密码</List.Item>
                    <List.Item extra="0.0.1">软件版本</List.Item>
                    <List.Item arrow="horizontal" onClick={this.mockLogin}>调试登录</List.Item>
                </List>
            </div>
        );
    }
}

export default withStore(Account);